<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>espanol_begin</title>
        <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
        <style type="text/css">
            #target {
                font-size: 25px;
                color: black;
            }
            #pass {
                color: greenyellow;
            }
            #source {
                font-size: 25px;
                border: 1px solid #000;
                padding: 0 5px;
            }
        </style>
    </head>
    <body>
        <div><button type="button" onclick="toggle();">toggle</button><span id="alphabet" style="display: none;"></span></div>
        <div id="target"></div>
        <div id="source" contenteditable></div>
        <script type="text/javascript">
            var all_alphabet = [];
            for (var i = 0; i < 26; ++i) {
                all_alphabet.push(String.fromCharCode(65 + i).toUpperCase());
            }
            all_alphabet.push('Ñ');
            var all_alphabet_say = {
                'A': 'a', 'B': 'be', 'C': 'ce', 'D': 'de', 'E': 'e', 'F': 'efe', 'G': 'ge', 'H': 'hache', 
                'I': 'i', 'J': 'jota', 'K': 'ca', 'L': 'ele', 'M': 'eme', 'N': 'ene', 'O': 'o', 'P': 'pe', 
                'Q': 'cu', 'R': 'ere', 'S': 'ese', 'T': 'te', 'U': 'u', 'V': 'uve', 'W': 'uve doble', 
                'X': 'equis', 'Y': 'i griega', 'Z': 'zeta', 'Ñ': 'eñe'
            };
            var target = [];
            var say = '';
            var is_toggle_alphabet = false;
            $(window).on('load', () => {
                init_target();
            });
            $('#source').on('keyup', () => {
                var src = $('#source').html();
                if (src === say) {
                    if (target.length === 0) {
                        init_target();
                    } else {
                        var pass = $('#pass').html();
                        var prev = target.shift();
                        say = all_alphabet_say[target[0]];
                        $('#alphabet').html(say);
                        $('#target').html('<span id="pass">' + pass + prev + '</span>' + target.join(''));
                        $('#source').html('');
                    }
                }
            });
            const init_target = () => {
                target = [];
                for (var i = 0; i < 50; ++i) {
                    target.push(all_alphabet[parseInt(Math.random() * 27)]);
                }
                $('#target').html('<span id="pass"></span>' + target.join(''));
                $('#pass').html('');
                say = all_alphabet_say[target[0]];
                $('#alphabet').html(say);
            };
            const toggle = () => {
                if (is_toggle_alphabet) {
                    $('#alphabet').hide();
                    is_toggle_alphabet = false;
                } else {
                    $('#alphabet').show();
                    is_toggle_alphabet = true;
                }
            };
        </script>
    </body>
</html>